import Taro, { Component, Config } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      title: 'homepage',
      list: [1, 2, 3]
    }
  }

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUpdate (nextProps, nextState) { }

  componentDidUpdate (prevProps, prevState) { }

  shouldComponentUpdate (nextProps, nextState) {
    return true
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  add = (e) => {
    this.setState({
      list: [...this.state.list, this.state.list.length + 1]
    })
  }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <View className='title'>{this.state.title}</View>
        <View className='content'>
          {this.state.list.map(item => {
            return (
              <View className='item'>{item}</View>
            )
          })}
        </View>
        <Button className='add' onClick={this.add}>add</Button>
      </View>
    )
  }
}
